<template>
	<view class="sim-page">
		<view class="title">SIM卡信息</view>
		<view class="sim-card" v-for="item in devices" :key="item.deviceId">
			<view class="row">
				<text class="label">设备名称</text>
				<text class="value">{{item.deviceName}}</text>
			</view>
			<view class="row" v-if="item.imei">
				<text class="label">设备imei</text>
				<text class="value">{{item.imei}}</text>
			</view>
			<view class="row">
				<text class="label">设备地址</text>
				<text class="value">{{item.deviceAddr}}</text>
			</view>
			<view class="row" v-if="item.iccid">
				<text class="label">卡号</text>
				<text class="value">{{item.iccid}}</text>
			</view>
			<!-- 			<view class="row" v-if="item.state">
				<text class="label">状态</text>
				<text class="value active">{{item.state}}</text>
			</view> -->
			<view class="row" v-if="item.operator">
				<text class="label">运营商</text>
				<text class="value">{{item.operator}}（{{item.state}}）本月用量{{item.unEffectMonth}}MB</text>
			</view>
			<view class="row" v-if="item.activeTime">
				<text class="label">激活时间</text>
				<text class="value">{{item.activeTime}}</text>
			</view>
			<view class="row" v-if="item.endTime">
				<text class="label">到期时间</text>
				<text class="value">{{item.endTime}}</text>
			</view>
			<button class="btn-primary" v-if="item.iccid && item.state != '已销户'" @click="recharge(item)">一键充值</button>
		</view>
		<view class="" style="height: 100rpx;">

		</view>
		<!-- 底部按钮 -->
		<!-- 	<view class="btn-footer">
			<view class="btn btn-primary" @click="goRecharge">流量充值</view>
			<view class="btn btn-secondary" @click="goMyOrder">我的订单</view>
		</view> -->
	</view>
</template>

<script>
	import {
		deviceListApi,
		wechatPlaceOrderApi,
		queryOrderNoApi
	} from '@/api/index.js';
	export default {
		data() {
			return {
				searchData: {
					IMEI: "", //设备码
					deviceName: "", //设备名称
					deviceState: "", //设备状态(0-离线1-在线2-缺水3-异常)-非必填搜索条件
					isBound: "", //是否绑定（0-未绑定，1-已绑定，2-已注销）-非必填搜索条件
					pageNum: 1, //
					pageSize: 10, //
					orderByColumn: "create_time", //排序列
					isAsc: "desc", //排序的方向 "desc" 或者 "asc".
				},
				total: 0,
				pageFlag: false,
				devices: [],
			};
		},
		onReachBottom() {
			if (!this.pageFlag) {
				if (this.searchData.pageNum * this.searchData.pageSize > this.total) return
				this.searchData.pageNum += 1;
				this.deviceList(true)
			}
			console.log('触底');
		},
		onHide() {
			// console.log('切换页面');
			this.pageFlag = false
			this.searchData.pageNum = 1
		},
		onShow() {
			this.deviceList();
		},
		methods: {
			// 充值
			async recharge(item) {
				// if (!this.selectedItems.length) {
				// 	uni.showToast({
				// 		title: '请先选择要充值的SIM卡',
				// 		icon: 'none'
				// 	});
				// 	return;
				// }
				console.log(item, 'iccId');
				const res = await wechatPlaceOrderApi({
					iccId: item.iccid
				});
				console.log(res, 'res');
				if (res.code === 200) {
					wx.requestPayment({
						timeStamp: res.data.timeStamp, //后端返回的时间戳
						nonceStr: res.data.nonceStr, //后端返回的随机字符串
						package: res.data.package, //后端返回的prepay_id
						signType: res.data.signType, //后端签名算法,根据后端来,后端MD5这里即为MD5
						paySign: res.data.paySign, //后端返回的签名
						success: (result) => {
							console.log('用户支付扣款成功', result)
							this.queryOrderNo(res.data.orderNo, 1);
						},
						fail: (err) => {
							console.log('用户支付扣款失败', err)
							this.queryOrderNo(res.data.orderNo, 0);
						}
					})
				}
				// uni.showToast({
				// 	title: '开始充值...',
				// 	icon: 'success'
				// });
			},
			// 查询微信支付订单API（用户支付完调用，可根据返回的支付状态按需循环调用）
			async queryOrderNo(orderNo, type) {
				const res = await queryOrderNoApi(orderNo);
				console.log(res, 'res');
				if (type === 1) {
					uni.showModal({
						title: '提示',
						content: res.msg,
						showCancel: false,
						success: (resp) => {
							if (resp.confirm) {
								this.pageFlag = false
								this.searchData.pageNum = 1
								this.deviceList();
							}
						}
					})
				}
			},
			async deviceList(next) {
				const res = await deviceListApi(this.searchData);
				console.log(res, '设备列表');
				if (this.searchData.pageNum === 1 && res.rows.length === 0) {
					this.devices = [];
					this.total = 0;
				}
				if (res.rows && res.rows.length > 0) {
					const devices = next ?
						this.devices.concat(res.rows) :
						res.rows
					this.devices = devices;
					this.total = res.total;
				} else {
					if (next) {
						this.pageFlag = true
					}
				}
			},
			// 跳转设备详情
			toDetail(item) {
				console.log(item, 'item');
				uni.navigateTo({
					url: '/pages/myDevices/detail?deviceId=' + item.deviceId
				})
			},
			// 跳转我的订单
			goMyOrder() {
				uni.redirectTo({
					url: '/pages/myOrder/myOrder'
				})
			},
			goRecharge() {
				console.log("跳转流量充值");
				uni.navigateTo({
					url: '/pages/myFlow/recharge'
				})
			},
			goRecord() {
				console.log("跳转充值记录");
				uni.navigateTo({
					url: '/pages/myFlow/record'
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.sim-page {
		background-color: #f5f5f5;
		min-height: 100vh;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.sim-card {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 10rpx 30rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
		margin-bottom: 20rpx;
	}

	.title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 30rpx;
		padding-left: 10rpx;
		border-left: 6rpx solid #2f6cff;
	}

	.row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.row:last-child {
		border-bottom: none;
	}

	.label {
		font-size: 28rpx;
		color: #666;
	}

	.value {
		font-size: 28rpx;
		color: #333;
	}

	.value.active {
		color: #4caf50;
	}

	/* 底部按钮 */
	.btn-footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		justify-content: space-between;
		padding: 20rpx 30rpx 50rpx;
		background-color: #f5f5f5;
		box-sizing: border-box;
		gap: 20rpx;
	}

	.btn {
		flex: 1;
		text-align: center;
		padding: 20rpx 0;
		font-size: 30rpx;
		border-radius: 50rpx;
		font-weight: 500;
	}

	.btn-primary {
		background: linear-gradient(90deg, #00aaff 0%, #0081ff 100%);
		color: #fff;
	}

	.btn-secondary {
		background-color: #fff;
		color: #2f6cff;
		border: 2rpx solid #2f6cff;
	}
</style>